<template>
  <div>
    <div class="toolsbox">
      <div id="hotmap" style="width:900px;height:700px;margin:0 auto;" class="bar"></div>
    </div>
  </div>
</template>

<script>

import * as echarts from 'echarts'
import axios from 'axios'

export default {
  name: 'Hotmap',
  data() {
    return {
      chart: '',
    }
  },
  methods: {
    async init() {
      this.chart = echarts.init(document.getElementById('hotmap'))
      await axios.get('https://wz.mala.cn/static/sichuan.json').then(function(geoJson) {
        echarts.registerMap('sc', geoJson.data)

      })
      const ChartTestData = {
        series: [
          {
            name: '香港18区人口密度',
            type: 'map',
            map: 'sc',
            label: {
              show: true
            },
            data: [],
          }
        ]
      }
      this.chart.setOption(ChartTestData)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="less">


</style>
